<template>
  <!-- :style="topSearchStyle" -->
  <div class="top-search">
    <div class="select-group">
      <el-popover
        placement="bottom"
        :width="120"
        trigger="click"
        ref="popoverParent"
      >
        <template #reference>
          <div class="city">
            {{ city.name }}<img src="../images/select.png" alt="" />
          </div>
        </template>
        <div class="city-list">
          <div
            class="city-item"
            v-for="(item, index) in CityData"
            :key="index"
            @click="citySelect(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </el-popover>
      <div class="line">|</div>
      <el-popover
        placement="bottom"
        :width="120"
        trigger="click"
        ref="popoverChild"
      >
        <template #reference>
          <div class="city">
            {{ county.name }}<img src="../images/select.png" alt="" />
          </div>
        </template>
        <div class="city-list">
          <div
            class="city-item"
            v-for="(item, index) in cildOption"
            :key="index"
            @click="countySelect(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </el-popover>
    </div>
    <div class="checkout-group">
      <div class="row" v-if="moduleVisible.ybModule">
        <el-checkbox v-model="formData.GDZ" label="格点值" />
        <el-checkbox v-model="formData.SBT" label="色斑图" />
      </div>
      <div class="row">
        <el-checkbox v-model="formData.xm" label="区县名" />
        <el-checkbox
          v-model="formData.xj"
          label="区县界"
          @change="handleShowGeoJson"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as L from 'leaflet'
import { createTileLayer } from '@quickearth/leaflet'
import { predefinedImageTiles } from '@quickearth/core'
import { fireInsuranceStore } from '@/pages/forestry/store/store'
import { useBaseLeafletMapStore } from '@/store/modules/baseLeafletMap'
import apiList from '@/pages/forestry/api/api'
import yulinGeojson from '@/assets/data/yulin1.json'
import yulinSideGeojson from '@/assets/data/yulin-side.json'
import taiyuanQxGeojson from '@/assets/data/taiyuan-qx.json'
import linqu from '@/assets/data/linqu.json'
import test from '@/assets/data/test.json'
const fireStore = fireInsuranceStore()
const baseLeafletMapStore = useBaseLeafletMapStore()
const moduleVisible = computed(() => fireStore.moduleVisible)
const city = ref({
  name: '全部',
  code: '全部'
})
const county = ref({
  name: '全部',
  code: '全部'
})
const CityData = ref([])
const cildOption = ref([{ name: '全部', code: '' }])
const getCityData = async () => {
  let { data } = await apiList.getCityList()
  CityData.value = [
    {
      name: '全部',
      code: '全部'
    },
    ...data
  ]
}
const getCountyList = async (id, name) => {
  let { data } = await apiList.getCountyList({ code: id })
  cildOption.value = [{ name: '全部', code: name }, ...data]
}
const popoverParent = ref(null)
const popoverChild = ref(null)
const citySelect = citys => {
  city.value = citys
  county.value = {
    name: '全部',
    code: '全部'
  }
  baseLeafletMapStore.cameraPos = null
  popoverParent.value.hide()
  if (citys.name == '全部') {
    cildOption.value = [{ name: '全部', code: '全部' }]
    useEventBus('taiyuanqxWhite')
    handleShowGeoJson(formData.xj)
    useEventBus('handleFlyTo').emit({
      lat: 37.36,
      lon: 112.14,
      zoom: 7.2
    })
    fireStore.componentsVisible.labels = '全部'
    useEventBus('handleRemoveLayer').emit('taiyuanqxWhite')
    useEventBus('handleRemoveLayer').emit('taiyuanshiWhite')
  } else {
    getCountyList(citys.code, citys.name)
    useEventBus('handleRemoveLayer').emit('yulinWhite')
    useEventBus('handleRemoveLayer').emit('yulinSideWhite')
    useEventBus('handleRemoveLayer').emit('taiyuanqxWhite')
    useEventBus('handleRemoveLayer').emit('taiyuanshiWhite')
    useEventBus('handleRemoveAllLayer')
    taiyuanQxGeojson.features.forEach(item => {
      if (item.parent == citys.name) {
        fireStore.componentsVisible.labels = JSON.stringify(item)
        useEventBus('handleInitLayer').emit(item, {
          name: 'taiyuanshiWhite',
          select: 'none'
        })
        yulinGeojson.features.forEach(val => {
          if (val.properties) {
            if (val.properties.name == citys.name) {
              useEventBus('handleFlyTo').emit({
                lat: val.properties.centroid[1],
                lon: val.properties.centroid[0],
                zoom: 9
              })
            }
          }
        })
      } else {
      }
    })
  }
}
const countySelect = countys => {
  county.value = countys
  useEventBus('handleRemoveLayer').emit('taiyuanshiWhite')
  useEventBus('handleRemoveLayer').emit('taiyuanqxWhite')
  popoverChild.value.hide()
  if (countys.name == '全部') {
    taiyuanQxGeojson.features.forEach(val => {
      if (val.parent == countys.code) {
        fireStore.componentsVisible.labels = JSON.stringify(val)
        useEventBus('handleInitLayer').emit(val, {
          name: 'taiyuanshiWhite',
          select: 'none'
        })
      }
    })
    yulinGeojson.features.forEach(val => {
      if (val.properties) {
        if (val.properties.name == countys.name) {
          useEventBus('handleFlyTo').emit({
            lat: val.properties.centroid[1],
            lon: val.properties.centroid[0],
            zoom: 8
          })
        }
      }
    })
  } else {
    taiyuanQxGeojson.features.forEach(item => {
      if (item.parent == city.value.name) {
        item.features.forEach(val => {
          if (val.properties.name == countys.name) {
            fireStore.componentsVisible.labels = JSON.stringify(val)
            useEventBus('handleInitLayer').emit(val, {
              name: 'taiyuanqxWhite',
              select: 'none'
            })
            useEventBus('handleFlyTo').emit({
              lat: val.properties.centroid[1],
              lon: val.properties.centroid[0],
              zoom: 10
            })
          }
        })
      }
    })
  }
}

const formData = reactive({
  type: [],
  GDZ: computed({
    get: () => fireStore.componentsVisible.GDZ,
    set(newValue) {
      fireStore.componentsVisible.GDZ = newValue
    }
  }),
  SBT: computed({
    get: () => fireStore.componentsVisible.SBT,
    set(newValue) {
      fireStore.componentsVisible.SBT = newValue
    }
  }),
  xm: computed({
    get: () => fireStore.componentsVisible.xm,
    set(newValue) {
      fireStore.componentsVisible.xm = newValue
    }
  }),
  xj: computed({
    get: () => fireStore.componentsVisible.xj,
    set(newValue) {
      fireStore.componentsVisible.xj = newValue
    }
  })
})
const colorTransparentMapStyle = {
  fillColor: '#Fff',
  weight: 4,
  opacity: 1,
  color: '#510086',
  fillOpacity: 0
}
const loadQhWhite = () => {
  useEventBus('handleRemoveLayer').emit('qhWhite')
  useEventBus('handleAddLayer').emit(
    L.geoJSON(yulinSideGeojson, {
      style: colorTransparentMapStyle
    }),
    'qhWhite'
  )
}
const handleShowGeoJson = val => {
  if (val) {
    useEventBus('handleRemoveLayer').emit('yulinWhite')
    useEventBus('handleRemoveLayer').emit('yulinSideWhite')
    useEventBus('handleInitLayer').emit(yulinGeojson, {
      name: 'yulinWhite',
      select: ''
    })
  } else {
    useEventBus('handleRemoveLayer').emit('yulinWhite')
    useEventBus('handleRemoveLayer').emit('yulinSideWhite')
    useEventBus('handleInitLayer').emit(yulinSideGeojson, {
      name: 'yulinSideWhite',
      select: ''
    })
  }
  loadQhWhite()
}
// 图层处理
const handleChangeMapStyle = val => {
  switch (val) {
    case 'wx':
      useEventBus('handleRemoveLayer').emit('tdtNormal')
      const tdtNormalTileLayer = L.tileLayer(
        'http://172.18.77.23:80/sfzxGis/tdtSatellite/{z}/{x}/{y}.jpg'
      )
      useEventBus('handleAddLayer').emit(tdtNormalTileLayer, 'tdtSatellite')
      break
    case 'xz':
      useEventBus('handleRemoveLayer').emit('tdtSatellite')
      const tdtSatelliteTileLayer = L.tileLayer(
        'http://172.18.77.23:80/sfzxGis/tdtNormal/{z}/{x}/{y}.jpg'
      )
      useEventBus('handleAddLayer').emit(tdtSatelliteTileLayer, 'tdtNormal')
      break
  }
}
const colorlinjuMapStyle = {
  fillColor: 'rgba(255,255,255,1)',
  weight: 1,
  opacity: 1,
  color: '#510086',
  fillOpacity: 0
}
let linquJson = ref({
  type: 'GeometryCollection',
  geometries: []
})

const initLJ = () => {
  apiList.getForestBureauArea().then(res => {
    if (res.code == 200) {
      for (let item of res.data) {
        linquJson.value.geometries.push({
          type: 'Polygon',
          coordinates: item.coordinateArray,
          bureauDetail: item.bureauDetail
        })
      }
      fireStore.lqAllDataList = linquJson.value
      useEventBus('handleAddLayer').emit(
        L.geoJSON(linquJson.value, {
          style: colorlinjuMapStyle
        }),
        'lingju'
      )
    }
  })
}
// 县界显示
// watch(
//   () => fireStore.gdskjcCurrentActive,
//   val => {
//     handleShowGeoJson(formData.xj)
//     if (val == '预报') {
//       initLJ()
//     } else {
//       useEventBus('handleRemoveLayer').emit('lingju')
//     }
//   },
//   {
//     deep: true,
//     immediate: true
//   }
// )
// watch(()=>)
onMounted(() => {
  handleChangeMapStyle('wx')
  handleShowGeoJson(formData.xj)
  getCityData()
  initLJ()
  fireStore.componentsVisible.xm = false
  fireStore.componentsVisible.GDZ = true
  fireStore.componentsVisible.SBT = true
})
onUnmounted(() => {
  useEventBus('handleRemoveLayer').emit('lingju')
})
</script>

<style lang="scss" scoped>
.top-search {
  position: absolute;
  top: 20px;
  right: 31px;
  width: 217px;
  height: auto;
  background: rgba(0, 13, 35, 0.76);
  border-radius: 4px 4px 4px 4px;
  z-index: 1200;
  transition: all 0.4s;
  padding: 14px 14px 0 14px;
  box-sizing: border-box;
  color: #fff;
  box-shadow: 0px 0px 6px 1px rgba(0, 204, 255, 0.77),
    inset 0px 0px 14px 1px #00ccff;
  border: 1px solid #2c96cd;
  .select-group {
    width: 190px;
    height: 34px;
    border: 1px solid rgba(2, 19, 43, 0.69);
    background: rgba(2, 19, 43, 0.69);
    box-shadow: inset 0px 0px 6px 1px #00b9ff;
    border-radius: 4px 4px 4px 4px;
    display: flex;
    .line {
      width: 1px;
      height: 18px;
      margin-top: 8px;
      opacity: 0.29;
    }
  }
  .checkout-group {
    margin-top: 8px;
    .row {
      height: 40px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .el-checkbox {
        width: 60%;
      }
      .el-checkbox:last-child {
        width: 30%;
      }
    }
  }
  .interval {
    display: inline-block;
    padding-bottom: 3px;
    margin-right: 10px;
  }

  .el-checkbox {
    --el-checkbox-text-color: #fff;
    margin-right: 10px;

    .input-detail {
      display: flex;
      align-items: center;
      justify-content: center;

      :deep(.el-input-number) {
        width: 43px;
        height: 22px;
        margin: 0 5px;

        .el-input-number__decrease,
        .el-input-number__increase {
          display: none;
        }

        .el-input__wrapper {
          padding: 0;
        }
      }
    }
  }

  .el-radio {
    --el-radio-text-color: #fff;
    margin-right: 10px;
  }
  .city {
    width: 220px;
    text-align: left;
    line-height: 35px;
    padding-left: 10px;
    font-size: 14px;
    cursor: pointer;
    padding-right: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 10px;
      height: 4px;
    }
  }
}
</style>
<style>
.el-input__wrapper {
  background-color: transparent !important;
  box-shadow: 0 0 0 0 transparent !important;
}
.el-input--large .el-input__inner {
  height: 33px !important;
  color: #fff !important;
  font-size: 14px !important;
}
.el-popover.el-popper {
  width: 120px;
  padding: 0 !important;
  background-color: rgba(0, 13, 35, 1);
  border-radius: 5px;
}
.el-popper__arrow {
  display: none;
}
.el-popper.is-light {
  border: 1px solid rgba(44, 150, 205, 1);
}
.city-list {
  width: 148px;
  height: 200px;
  background-color: rgba(0, 13, 35, 0.76);
  overflow-y: auto;
  border-radius: 5px;
}
.city-item {
  width: 100%;
  height: 30px;
  font-size: 14px;
  color: #fff;
  line-height: 30px;
  padding-left: 5px;
  box-sizing: border-box;
  cursor: pointer;
}
.city-item:hover {
  background-color: rgba(255, 255, 255, 0.5);
}
</style>
